﻿@model Tarasca.Models.EditarCategoriaModel
@using BLLTarasca;
<script type="text/javascript">
    $(document).ready(function () {
        $('#selectorColor').colorPicker();
        EventBinder($("#btnCancelarEditarCategoria"), "click", mostrarCategorias);
        EventBinder($("#btnCargarNuevaCategoria"), "click", guardarCategoria);
    });

    function guardarCategoria() {
        if (!validarDatosCategoria())
            return;

        var idCategoria = @Html.Raw(Model.IdCategoria.ToString());
        var nombre = $("#nombre").val();
        var categoriaColor = $("#selectorColor").val();
        var idCuenta = @Html.Raw(Model.IdCuenta.ToString());

        $.ajax({
            url:'@Url.Content("~/Categorias/Guardar/")',
            data: { IdCategoria: idCategoria, Nombre: nombre, Color: categoriaColor, IdCuenta: idCuenta },
            success: function (data) {
                subMenuOpcionSeleccionada = "NuevaCategoria";
                ocultarCargandoCuentas();
                mostrarCategorias();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                ocultarCargandoCuentas();
                mostrarMensajeGlobalError("Nueva Categoría");
            }
        });
    }

    function validarDatosCategoria() {
        var todoBien = true;
        
        if($("#nombre").val().length == 0){
            $("#nombre").parent().addClass("has-error");
            $("#nombre").parent().removeClass("has-success");
            todoBien = false;
        }
        else{
            $("#nombre").parent().removeClass("has-danger");
            $("#nombre").parent().addClass("has-success");
        }

        return todoBien;
    }
</script>
@if (Model.IdCategoria > 0)
{
    <h1>Editar categoría</h1>
}
else
{
    <h1>Nueva categoría</h1>
}
<div class="form-horizontal contenedorEditarMovimiento">
    <div class="form-group">
        <label class="col-md-2 control-label">Nombre:</label>
        <div class="col-md-4">
            <input id="nombre" type="text" class="form-control" value="@Model.Nombre" placeholder="Nombre de Categoría" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">Color:</label>
        <div class="col-md-4">
            <input id="selectorColor" type="text" class="form-control" value="@Model.Color" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-4">
            <button id="btnCargarNuevaCategoria" class="btn btn-success">Guardar</button>
            <button id="btnCancelarEditarCategoria" class=" btn btn-danger">Cancelar</button>
        </div>
    </div>
</div>